<template>
  <div class="withhold-wrap">
    <div class="withhold-box">
      <span class="title">选择扣款类型:</span>
      <input class="withhold-con" placeholder="请选择扣款类型" @click="toPage1" readonly v-model="withhold" v-if="type == 1"/>
      <input class="withhold-con" placeholder="请选择扣款类型" @click="toPage2" readonly v-model="withhold" v-if="type == 2"/>
      <img src="../in.png" class="pic" onclick="return false"/>
    </div>
    <div class="withhold-box">
      <span class="title">金额:</span>
      <div class="withhold-input">
        <input type="text" class="withhold" placeholder="0.00" v-model="withholdMoney" @blur="inputBlur"
               oninput="this.value=this.value.replace(/[^\d.]/g,'')"/>
      </div>
      <span class="money">元</span>
    </div>
    <div class="btn-box" v-if="type == 1 && hideBtn">
      <button type="button" class="save" @click="saveWithHold">保存</button>
    </div>
    <div class="btn-box" v-if="type == 2 && hideBtn">
      <button type="button" class="btn cancel" @click="delCustom">删除</button>
      <button type="button" class="btn confirm" @click="modifyWithHold">保存</button>
    </div>

    <!--自定义弹框-->
    <div class="modal-cover" v-show="showModal" @click="closeModal"></div>
    <div class="modal-box" v-show="showModal">
      <div class="title">自定义扣款类型</div>
      <div class="apply-con">
        <span class="real">扣款名称:</span>
        <div class="name-box">
          <input type="text" class="name" @blur="inputBlur" v-model="customName" maxlength="10"
                 onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"/>
        </div>
      </div>
      <div class="press-box">
        <button type="button" class="confirm" @click="confirmCustom">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {getSessionStore, removeObjWithArr} from "../../../config/util"

  export default {
    data() {
      return {
        custom: 0,
        showModal: false,
        withhold: "",
        withholdMoney: "",
        customName: "",
        withholdList: [],
        mark: 0,
        type: "",
        index: "",
        userId: "",
        leaveId: "",
        lendMoney: "",
        userOrigin: "",
        deductContent: "",
        subsidyContent: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      this.custom = this.$route.query.custom;
      this.type = this.$route.query.type;
      this.index = this.$route.query.index;
      this.userId = this.$route.query.userId;

      this.leaveId = this.$route.query.leaveId;
      this.lendMoney = this.$route.query.lendMoney;
      this.userOrigin = this.$route.query.userOrigin;
      this.deductContent = this.$route.query.deductContent;
      this.subsidyContent = this.$route.query.subsidyContent;

      if (this.custom == 1) {
        this.showModal = true;
      }
      this.withhold = this.$route.query.withhold;
      this.withholdMoney = this.$route.query.money;
      this.withholdList = JSON.parse(sessionStorage.getItem("withholdList"));
      if (this.withholdList == null) {
        this.withholdList = [];
      }

      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      toPage1() {
        this.$router.push({
          path: "/withholdpage", query: {
            "type": 1,
            "userId": this.userId,
            "leaveId": this.leaveId,
            "lendMoney": this.lendMoney,
            "userOrigin": this.userOrigin,
            "deductContent": this.deductContent,
            "subsidyContent": this.subsidyContent
          }
        });
      },
      toPage2() {
        this.$router.push({
          path: "/withholdpage", query: {
            "type": 2,
            "index": this.index,
            "userId": this.userId,
            "leaveId": this.leaveId,
            "lendMoney": this.lendMoney,
            "userOrigin": this.userOrigin,
            "deductContent": this.deductContent,
            "subsidyContent": this.subsidyContent
          }
        });
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      closeModal() {
        this.showModal = false;
      },
      saveWithHold() {//保存
        if (this.withhold == "" || this.withhold == undefined || this.withhold == null) {
          this.$vux.toast.text("请选择扣款类型", "middle");
          return;
        }
        let reg = /^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/;
        if (this.withholdMoney == "" || this.withholdMoney == null) {
          this.$vux.toast.text("请输入正确的金额", "middle");
          return;
        } else if (this.withholdMoney == 0 || !reg.test(this.withholdMoney)) {
          this.$vux.toast.text("请输入正确的金额", "middle");
          return;
        }

        let obj = {};
        obj.withhold = this.withhold;
        obj.withholdMoney = this.withholdMoney;
        this.withholdList.push(obj);
        sessionStorage.setItem("withholdList", JSON.stringify(this.withholdList));

        this.skipPage();
      },
      confirmCustom() {//自定义扣款类型
        if (this.withholdList != null && this.withholdList.length > 0) {
          for (var i = 0, length = this.withholdList.length; i < length; i++) {
            if (this.withholdList[i].withhold == this.customName) {
              this.mark = 1;
              this.$vux.toast.text("该类型已存在，请重新选择", "middle");
              break;
            } else {
              this.mark = 0;
            }
          }
        }
        if (this.mark == 0) {
          this.withhold = this.customName;
          this.showModal = false;
        }
      },
      delCustom() {//删除扣款记录
        if (this.withholdList != null && this.withholdList.length > 0) {
          for (var i = 0, length = this.withholdList.length; i < length; i++) {
            if (this.withholdList[i].withhold == this.withhold) {
              removeObjWithArr(this.withholdList, this.withholdList[i]);
              sessionStorage.setItem("withholdList", JSON.stringify(this.withholdList));
              break;
            }
          }
        }
        this.skipPage();
      },
      modifyWithHold() {//修改扣款记录
        if (this.withholdList != null && this.withholdList.length > 0) {
          for (var i = 0, length = this.withholdList.length; i < length; i++) {
            if (this.withholdList[i].withhold == this.withhold) {
              this.withholdList[i].withhold = this.withhold;
              this.withholdList[i].withholdMoney = this.withholdMoney;
              sessionStorage.setItem("withholdList", JSON.stringify(this.withholdList));
              break;
            } else if (i == this.index) {
              this.withholdList[i].withhold = this.withhold;
              this.withholdList[i].withholdMoney = this.withholdMoney;
              sessionStorage.setItem("withholdList", JSON.stringify(this.withholdList));
            }
          }
        }

        this.skipPage();
      },
      skipPage() {
        if (getSessionStore("subsidy_withhold") == "002266") {
          this.$router.push({
            path: "/leavehistorymodify", query: {
              "leaveId": this.leaveId,
              "lendMoney": this.lendMoney,
              "userOrigin": this.userOrigin,
              "deductContent": this.deductContent,
              "subsidyContent": this.subsidyContent
            }
          });
        } else {
          this.$router.push({path: "/leavebill", query: {"userId": this.userId}});
        }
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .withhold-wrap
    wh(100%, 100%)
    overflow: hidden
    background: rgba(242, 242, 242, 1)
    .withhold-box
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .withhold-con
        flex: 1
        text-align: right
        padding-right: 0.267rem
        height: 0.6rem
        line-height: 0.6rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .pic
        margin-left: auto
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .withhold-input
        display: flex
        align-items: center
        flex: 1
        .withhold
          flex: 1
          text-align: right
          padding-right: 0.267rem
          height: 0.6rem
          line-height: 0.6rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
      .money
        margin-right: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
    .btn-box
      position: absolute
      bottom: 0.64rem
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 1.28rem
      .save
        width: 92.53%
        height: 1.28rem
        line-height: 1.28rem
        font-size: 0.453rem
        border-radius: 0.16rem
        color: rgba(255, 255, 255, 1)
        background: rgba(60, 175, 255, 1)
      .btn
        width: 4.267rem
        height: 1.28rem
        line-height: 1.28rem
        font-size: 0.453rem
        border-radius: 0.16rem
        color: rgba(255, 255, 255, 1)
      .cancel
        margin-right: 0.227rem
        background: rgba(255, 83, 83, 1)
      .confirm
        margin-left: 0.227rem
        background: rgba(60, 175, 255, 1)
    .modal-cover
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
    .modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      margin: auto
      wh(8rem, 4.72rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.173rem)
      .title
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        text-align: center
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .apply-con
        display: flex
        align-items: center
        justify-content: space-between
        padding-bottom: 0.4rem
        .real
          padding-left: 0.533rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .name-box
          display: flex
          align-items: center
          margin-right: 0.533rem
          wh(4.8rem, 0.96rem)
          border: 0.027rem solid rgba(224, 224, 224, 1)
          border-radius(0.16rem)
          .name
            padding-left: 0.1rem
            wh(90%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(147, 147, 147, 1))
      .press-box
        margin: 0 auto
        wh(6.933rem, 1.067rem)
        .confirm
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          wh(6.933rem, 1.067rem)
          line-height: 1.067rem
          text-align: center
          size-color(0.453rem, rgba(255, 255, 255, 1))
</style>
